<template>
  <div class='preview-container'>
    <el-tabs  type="border-card" >
      <el-tab-pane>
          <span slot="label"><i class="el-icon-mobile"></i>
                  手机
          </span>

        <div class="preview-layer">
          <div class="preview-phone">
            <iframe id="preview-html"
                    scrolling="yes"
                    name="preview-html"
                    frameborder="0"
                    style='overflow: hidden'
                    :src='this.mobilePreviewUrl'
            />
          </div>
        </div>

      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-monitor"></i>
                电脑
        </span>
        <el-scrollbar style="height: 77vh">
          <project-form :project-config='projectConfig'/>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import ProjectForm from '@/views/project/form/skin/ProjectForm'
  export default {
    name: 'PreView',
    props: {
      projectKey: String,
      isTemplate: {
        default: false
      }
    },
    data() {
      return {
        mobilePreviewUrl: '',
        projectConfig: {
          projectKey: '',
          showBtns: true
        }
      }
    },
    components: {
      ProjectForm
    },
    methods: {
    },
    created () {
      this.projectConfig.projectKey = this.projectKey
      console.log("this.projectConfig", this.projectConfig)
    },
    mounted () {
      console.log('this.projectConfig',this.projectConfig)
      const url = window.location.protocol + '//' + window.location.host
      console.log('this.isTemplate', this.isTemplate)
      if(this.isTemplate) {
        this.mobilePreviewUrl = `${url}/preview?key=${this.projectKey}&isTemplate=${this.isTemplate}`
      } else {
        this.mobilePreviewUrl = `${url}/preview?key=${this.projectKey}`
      }
      console.log('.mobilePreviewUrl',this.mobilePreviewUrl)
    }
  }
</script>

<style lang="less" scoped>
@import "src/assets/css/themeColor";
  .preview-container {
    height: 100%;
    overflow-y: auto;
    position: relative;
    margin: 0;
    padding: 0;
  //background-color: #efbda0;
  }
  .el-card{
    height: 100%;
    overflow-y: auto;
  }
  /deep/.el-tabs__nav-scroll{

  }
  /deep/ .el-tabs__header  {
  //width: 300px;
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  div.preview-layer {
    width: 500px;
    height: 100%;
    margin: 10px auto;
    text-align: center;
    display: flex;
    justify-content: center;
  }

  .preview-layer::-webkit-scrollbar{
    display: none!important;
    width: 0!important;
  }



  div.preview-layer .preview-phone {
    width: 372px;
    height: 744px;
    background: url('~@/assets/images/iphone.png');
    background-size: 372px 744px;
    z-index: 1;
  }
  .preview-phone::-webkit-scrollbar {
    width: 0 !important;
    background: transparent;
  }
  #preview-html {
    width: 347px !important;
    height: 568px !important;
    margin: 74px 0 0;
    border-radius: 5px;
    outline: none;
  //background-color: #e03e2d;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    overflow-x : hidden;
    overflow-y : hidden;
  }
  #preview-html .body {

  }
</style>
